// canvas 实现 watermark
const __canvasWM = ({
  container = document.body,
  width = '400',
  height = '350',
  font = '17px Microsoft Yahei',
  fillStyle = 'rgba(8, 90, 125, 0.5)',
  content = '水印',
  rotate = '15',
  zIndex = 1000
}) => {
  const canvas = document.createElement('canvas');

  canvas.setAttribute('width', width);
  canvas.setAttribute('height', height);
  const ctx = canvas.getContext('2d');

  ctx.textAlign = 'right';
  ctx.textBaseline = 'top';
  ctx.font = font;
  ctx.fillStyle = fillStyle;
  ctx.rotate((Math.PI / 180) * rotate);
  const arrayContent = content.split('\n');
  const w = parseFloat(width);
  const h = parseFloat(height) / 2;
  arrayContent.map((item, index) => {
    ctx.fillText(item, w, h + (index + 1) * 14);
  });
  const base64Url = canvas.toDataURL();
  const __wm = document.querySelector('.__wm');
  const watermarkDiv = __wm || document.createElement('div');
  const styleStr = `
      position:fixed;
      top:-140px;
      left:0;
      bottom:0;
      right:0;
      z-index:${zIndex};
      pointer-events:none;
      background-image:url('${base64Url}')`;

  watermarkDiv.setAttribute('style', styleStr);
  watermarkDiv.classList.add('__wm');

  if (!__wm) {
    container.style.position = 'relative';
    container.insertBefore(watermarkDiv, container.firstChild);
  }
};
// 调用
export default __canvasWM;
